import { Component } from 'react'
import { Image, View } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import dayjs from "dayjs"

//组件
import { LgPopLayer } from '../../../../components/popLayer'
import LgButton from '../../../../components/button'
import LgEmptyContent from '../../../../components/emptyContent'

import {PrPopCheckProps, IndexState, ReceiverTypeItemProps, ReceiverTypeItemState} from "./type"
import getInfo from '../../../utils/getInfo'

// interface PrPopCheckProps{
//   /**弹窗打开状态 */
//   isOpen:boolean
//   /**关闭弹窗函数 */
//   cancel():void
//   /**确定 */
//   confirm():void
//   /**读取状态：0/未读；1/已读 */
//   status:0|1
//   /**改变读取状态 */
//   onChangeStatus(status):void
//   /**已读和未读人数 */
//   number:{readNum?:number,unReadNum?:number}
//   /** */
//   data:{teachers:personObj[],students:personObj[],departments:personObj[],identities:personObj[],persons:personObj[],parents:personObj[]}
//   /** */
//   getMore?(receiverType):void
// }

// interface IndexState{
//   // chooseDate?:string
// }

// interface personObj{
//   photoPath:string
//   userId:string
//   userName:string
// }

export default class PrPopCheck extends Component <PrPopCheckProps,IndexState>{
  constructor(props) {
    super(props)
    this.state={
      nowStatus: 0
    }
    this.onConfirm = this.onConfirm.bind(this)
  }

  UNSAFE_componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  onConfirm(){
    this.props.confirm?this.props.confirm():""
  }
  onChangeStatus(status){
    this.setState({
      nowStatus: status
    })
    this.props.onChangeStatus?this.props.onChangeStatus(status):""
  }
  getMore(receiverType){
    this.props.getMore?this.props.getMore(receiverType):""
  }

  render() {
    let status = this.props.status
    let number = this.props.number
    let data = this.props.data
    return (
      <View className='PrPopCheck'>
        <LgPopLayer
          isOpen={this.props.isOpen}
          showLayer={this.props.cancel}
          position="bottom"
          title={"通知查收详情"}
          showClose
        >
          <View className='PrPopCheck_content'>
            <View className='top'>
              <View style={{display:"flex"}}>
                <View className={`top_tab left ${status==1?"active":""}`} onClick={()=>this.onChangeStatus(1)}>已读{number.readNum == undefined?"":`(${number.readNum})`}</View>
                <View className={`top_tab right ${status==0?"active":""}`} onClick={()=>this.onChangeStatus(0)}>未读{number.unReadNum == undefined?"":`(${number.unReadNum})`}</View>
              </View>
            </View>
            <View className='content'>
              {/* <ReceiverTypeItem name={"教师"} item={data.teachers} getMore={()=>this.getMore(1)}></ReceiverTypeItem> */}
              {/* <ReceiverTypeItem name={"学生"} item={data.students} getMore={()=>this.getMore(2)}></ReceiverTypeItem> */}
              {/* <ReceiverTypeItem name={"部门"} item={data.departments} getMore={()=>this.getMore(3)}></ReceiverTypeItem> */}
              {/* <ReceiverTypeItem name={"管理员"} item={data.identities} getMore={()=>this.getMore(4)}></ReceiverTypeItem> */}
              <ReceiverTypeItem status={this.state.nowStatus} total={number} name={"人员名单"} item={data.persons} getMore={()=>this.getMore(5)}></ReceiverTypeItem>
              {/* <ReceiverTypeItem name={"家长"} item={data.parents} getMore={()=>this.getMore(6)}></ReceiverTypeItem> */}

              {/* <ReceiverTypeItem name={"年级"} item={data.grades} getMore={()=>this.getMore(7)}></ReceiverTypeItem> */}
              {/* <ReceiverTypeItem name={"班级"} item={data.classes} getMore={()=>this.getMore(8)}></ReceiverTypeItem> */}
              {
                (data.teachers.length == 0 &&
                data.students.length == 0 && 
                data.departments.length == 0 && 
                data.identities.length == 0 && 
                data.persons.length == 0 && 
                data.parents.length ==0 &&
                data.grades.length ==0 &&
                data.classes.length ==0)?
                <View className='No_content'>
                  <LgEmptyContent 
                    // imgUrl={require("../images/index/占位图.png")} 
                    text={`暂无${status==1?"已读":"未读"}人员名单`} 
                    type="B"
                  ></LgEmptyContent>
                </View>
                :""
              }
            </View>
            <View className='bottom'>
              <LgButton className='btn_SendReminder' type='B' onClick={this.onConfirm}>发送催读提醒</LgButton>
            </View>
            <View className='bottom_space'></View>
          </View>
        </LgPopLayer>
      </View>
    )
  }
}



class ReceiverTypeItem extends Component <ReceiverTypeItemProps,ReceiverTypeItemState>{
  constructor(props) {
    super(props)
    this.state={

    }
  }

  UNSAFE_componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  render() {
    let name = this.props.name
    let datalist = this.props.item
    let total = this.props.total
    let status = this.props.status
    console.log(this.props)
    return (
      <View className='ReceiverTypeItem'>
        {
          ((datalist != undefined)&&(datalist.length>0))? 
          <>
            <View className='ReceiverType_name'>{name}</View>
            <View className='ReceiverType_box'>
              {
                datalist.map(item=>{
                  return (
                    <View className='Receiver_item' key={item.userId}>
                      <Image
                        className='Receiver_item_avatar'
                        src={item.photoPath+'?lg_tk='+getInfo.getToken()}
                        mode='aspectFill'
                        // mode="aspectFit"
                      ></Image>
                      <View className='Receiver_item_name'>{item.userName}</View>
                      <View className='Receiver_item_userId'>{item.userId}</View>
                    </View>
                  )
                })
              }
            </View>
            {
              datalist.length < parseInt(total.readNum) && status == 1 || datalist.length < parseInt(total.unReadNum) && status == 0 ? 
              <View className='ReceiverType_moreBtn' onClick={()=>{this.props.getMore?this.props.getMore():""}}>加载更多</View> 
              : ''
            }
            
          </>
          :""
        }
        
      </View>
    )
  }
}